<template>
  <div> 
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>  
      <el-breadcrumb-item>人员账号设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--表格区域 stripe 创建带斑马纹的表格-->
      <el-radio-group v-model="userRole" style="margin:0 35%;">
        <el-radio :label="1">学生账号</el-radio>
        <el-radio :label="2">教师账户</el-radio>
        <el-radio :label="3">领导账户</el-radio>
      </el-radio-group>
      <el-table :data="userList" stripe style="font-size:15px;width:980px;margin:0px 120px">
        <el-table-column align="center" label="序号" width="100" type="index" ></el-table-column>
        <el-table-column align="center" label="学号/工号" width="140" prop="username"> 
        </el-table-column>
        <el-table-column align="center" label="密码" prop="password" width="200"></el-table-column> 
        <el-table-column align="center" label="用户类型" width="200">
          <template slot-scope="scope">
            <el-tag :type="statusObj[scope.row.role].type">{{statusObj[scope.row.role].label}}</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="操作(编辑/删除)" width="300" > 
          <template slot-scope="scope" >
            <el-button type="success" icon="el-icon-edit" circle  @click="editUser(scope.row)" ></el-button> 
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(scope.row.username)" style="margin-left:10%"></el-button>
          </template>
        </el-table-column>
      </el-table>  
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage"
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

      <!--修改课题的对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <!--主体内容区域-->
      <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px" style="margin-left:100px;font-size: 20px">
        <el-form-item prop="username" label="学号/工号">
          <el-input v-model="userForm.username" placeholder="请输入学号/工号"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="userForm.password" placeholder="请输入账户密码"></el-input>
        </el-form-item>
        <el-form-item prop="role" label="账户类型">
          <el-select value-key="id" v-model="userForm.role" placeholder="请选择账户类型">
            <el-option v-for="role in roleList" :key="role.id" :value="role.id" :label="role.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
        <el-row style="margin-left:30%;margin-top:50px">
          <el-button round @click.native="dialogVisible = false">取 消</el-button>
          <el-button round  type="success" @click.native="submitEditUser('userFormRef')" style="margin-left:10%">提交修改</el-button> 
        </el-row>
      <!--底部按钮区域--> 
    </el-dialog>
  </div>
</template>

<script>
  import {getUserTotalByRole, getSysUserPageByRole, adminUpdateUser, deleteUserByUsername} from '../../axios/user'
  export default {
    name: 'AdminUser',
    data(){
      return { 
        userRole: 1,
        dialogTitle: '',
        dialogVisible: false,
        lastPage:0, // 最后一页的页码
        total: 0, // 用户总数 
        pageParam:{  currentPage: 1,   pageSize: 10  }, // 页码参数 
        oldUsername: '',
        userList: [], // 非管理员用户列表
        userForm: {}, // 编辑/添加表单数据
        statusObj: {
          1: { type: 'primary', label: '学生' },
          2: { type: 'warning', label: '教师' },
          3: { type: 'danger', label: '学院领导' },
          4: { type: 'success', label: '管理员' }
        },
        roleList: [
          { id: 1, label: '学生' },
          { id: 2, label: '教师' },
          { id: 3, label: '学院领导' }
        ], // 账户类型
        userFormRules:{
          username: [ { required: true, message: '学号/工号不能为空', trigger: 'blur' } ],
          password: [ { required: true, message: '请输入6-18位密码', min: 6, max: 18, trigger: 'blur' } ],
          type: [ { required: true, message: '账户类型不能为空', trigger: 'blur' } ]
        }
      }
    },
    watch:{
      userRole(){
        this.pageParam.currentPage = 1 // 切换时，默认回第一页
        this.getUserOfPage() 
      },
      total(){
        this.lastPage = Math.floor(this.total / 10);
        if(this.total % 10 !== 0){
          this.lastPage ++
        }
      }
    },
    created(){  
      this.getUserOfPage()
    },
    methods:{ 
      getUserOfPage(){ 
        // 向后端发送请求，获取系统用户账号列表
        getSysUserPageByRole(this.userRole, this.pageParam).then(res => {
          if(res.success) 
            this.userList = res.data 
        })
        // 获取指定类型账户总数 
        getUserTotalByRole(this.userRole).then(res => {
          if(res.success) this.total = res.data ; 
        }) 
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getUserOfPage() 
      },  
      editUser(userData){   
        this.dialogTitle = '编辑账户信息', 
        this.userForm = userData
        this.oldUsername = userData.username
        this.dialogVisible = true
      },
      deleteUser(name){ 
        this.$confirm('此操作将永久删除“' + name + '”系统用户, 是否继续?', '提示', {
          roundButton: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消', 
          type: 'warning'
        }).then(() => {
          // 发送后端请求，删除指定 id 的通知
          deleteUserByUsername(name).then(res => {
            if(res.success){
              this.$message.success('删除成功!');
              this.getTotal()
              this.getUserOfPage()
            }
          })  
        }).catch(() => {
          this.$message.info('已取消删除!');          
        }); 
      },
      submitEditUser(userFormRef){
        this.$refs[userFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 向后端发送请求，新增账户信息
              adminUpdateUser(this.oldUsername, this.userForm).then(res => {
                if(res.success) {
                  this.dialogVisible = false
                  this.$message.success('修改成功!')
                  this.getTotal()
                  this.getUserOfPage()
                }
              }) 
            }).catch(() => { 
              this.getUserOfPage()
              this.$message.info('取消修改!')
            }) 
          } 
        })
      }, 
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 60%;
  }
  .el-radio-group .el-radio {
    font-size: 20px;
  }
</style>